<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Options Demo</title>
<link href="//qsstage.morningstar.com/sdk/common/reset.css" type="text/css" rel="stylesheet"/>
<link href="../../../common/common.css" type="text/css" rel="stylesheet" />
<link href="../../../ui/dropdownlist/dropdownlist.css" type="text/css" rel="stylesheet"/>
<link href="../../../ui/dragdrop/dragdrop.css" type="text/css" rel="stylesheet"/>
<link href="../../../ui/datagrid/datagrid.css" type="text/css" rel="stylesheet"/>
<link href="../../../ui/scrollpanel/scrollpanel.css" type="text/css" rel="stylesheet" />
<link href="../../../ui/selectbutton/selectbutton.css" type="text/css" rel="stylesheet" />
<link href="../../../widgets/autocomplete/autocomplete.css" type="text/css" rel="stylesheet" />
<link href="../../../widgets/options/options.css" type="text/css" rel="stylesheet" />
<link href="../../../theme/default/style.css" type="text/css" rel="stylesheet" />


<script type="text/javascript" src="../../../lib/jquery.js"></script>
<script type="text/javascript" src="../../../lib/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../../lib/jquery.json.min.js"></script>
<script type="text/javascript" src="../../../common/common.js"></script>
<script type="text/javascript" src="../../../core/common.js"></script>
<script type="text/javascript" src="../../../core/permissionChecker.js"></script>
<script type="text/javascript" src="../../../core/tickers.js"></script>
<script type="text/javascript" src="../../../core/subscriber.js"></script>
<script type="text/javascript" src="../../../core/dataHandler.js"></script>
<script type="text/javascript" src="../../../core/pull.js"></script>
<script type="text/javascript" src="../../../core/push.js"></script>
<script type="text/javascript" src="../../../core/SDKDataManager.js"></script>


<script src="../../../formatter/qs_formatter_en_us.js" type="text/javascript"></script>
<script src="../../../language/en_us/qs_options_en_us.js" type="text/javascript"></script>

<script type="text/javascript" src="../../../common/common.js"></script>
<script type="text/javascript" src="../../../ui/util/util.js"></script>
<script type="text/javascript" src="../../../ui/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="../../../ui/dropdownlist/dropdownlist.js"></script>
<script type="text/javascript" src="../../../ui/scrollpanel/scrollpanel.js"></script>
<script type="text/javascript" src="../../../ui/datagrid/datagrid.js"></script>
<script type="text/javascript" src="../../../ui/selectbutton/selectbutton.js"></script>

<script type="text/javascript" src="../../../widgets/autocomplete/autocomplete.js"></script>
<script type="text/javascript" src="../../../widgets/options/options_settingpanel.js"></script>
<script type="text/javascript" src="../../../widgets/options/optionsWidget.js"></script>
<script type="text/javascript" src="../../../widgets/options/options.js"></script>
<script type="text/javascript" src="../../../theme/default/style.js"></script>
<script>
$(document).ready(function(){
	QSAPI.init('DISN');
	QSAPI.Authentication.login("511F1BFFABACF2797D53014B7B7EF29F502E7015781E8D93A04989A70197E422B9AC0FE2E59882CDC9713E118EEA680F7F0E859C73FBD6BEF64C7DD04490EF1A","62D2A0641B01FBF65FA127365CDC0DC427458A67D958FC979718FF067CCD1A8D8D4E839255D60957C1A502D25C724A1D65F6EEE07636A0AA84E8F51C8D1831EE",{
		onSuccess:function(result){
			QSAPI.DataManager.connectToPull("http://qsstage.morningstar.com/pullservice/pull/getPullQuote.jsp",5000,{
                 onSuccess:function(eventType){
					$("#status").text("Successfully")
					Options();
				},
                onFailure:function(eventType,err){							
					$("#status").text("Fail")
                }				
    		});	
		}
	});
});
var OptChangeSize=function(){
	container.width($('body').width());
	container.height($('body').height()-headHeight);
	
	}; 
function Options() {
	QSAPI.TickerFactory.create(["IBM"], {
		onSuccess : function(tickerList) {
				var config = {
					fixHeight : true,
					width:800,
					height:600,
					optionsToolBar : {
						queryBox : {
							show : true,
						},
						setting : {
							show : true,
						}
					}					
				};
				var callbacks = {
					onLoad : function(data) {
					},
					onStateChange : function(state) {
					},
					afterAcceptTicker : function() {
					},
					onClick : function(rowdata) {
						showRowdata(rowdata);
					},
					beforeClear : function() {
					}
				};
				var container1 = document.getElementById("container1");
				var id0 = 'options_' + Util.IdProducer.getId();
				var tickerObject0 = tickerList[0];
				var options = new QSAPI.Widget.Options(container1, config,
						callbacks, id0);
				options.init();
				options.acceptTicker(tickerObject0);
				options.changeOutSize($('body').width(),$('body').height()-$('#connectstatus').outerHeight());

				$(window).bind('resize',function(){
					options.changeOutSize($('body').width(),$('body').height()-$('#connectstatus').outerHeight());
				});
				$('#btnStart').bind('click',function(){
					options.startData();
				});
				$('#btnStop').bind('click',function(){
					options.pauseData();
				});								
			}
		})
	}
</script>
</head>
<body>
	<div id="connectstatus">
		<p>
		<div>
		<span>Pull Connection:</span><span id="status"></span><span><input type='button' id='btnStart' value='Start'><input type='button' id='btnStop' value='Stop'></span>
		</div>
		<div sytle="float:left">Clicked Row:</div>
		<div id='rowdatacontainer' style='width:700px;height:25px;overflow-y:auto;border:1px solid #000'></div>		
		</p>
	</div>
	
	<div id="container1" style='clear:both;width:870px;height:600px;'></div>	
</body>
<script>
function showRowdata(rowdata){
	var container=$('#rowdatacontainer');
	container.html("");
	var s='';
	$(s).append('{');
	for(var key in rowdata){
		s+=key;
		s+=':';
		s+=("'"+rowdata[key]+"',");
	}
	s=s.substring(0, s.length-1);
	s+='}';
	container.html(s);
}
</script>
</html>